<template>
    <div class="wrap">
  		<header-v></header-v>
  		
  		<div class="pro-content">
  		    <div class="title">
                <router-link to="/">产品中心</router-link>
                <p>Product Center</p>
            </div>
            <div class="tab">
                <ul>
                   <li><router-link to="/">台式机</router-link></li>
                   <li><router-link to="/">笔记本</router-link></li>
                   <li><router-link to="/">一体机</router-link></li>
                   <li><router-link to="/">游戏本</router-link></li>
                   <li><router-link to="/">超级本</router-link></li> 
                   <li><router-link to="/">平板电脑</router-link></li> 
                </ul>
            </div>
            <div class="content">
                <ul>
					<li>
						<img src="../../assets/pro_pic.jpg" class="pro_pic" alt="" />
						<div>
							<strong class="pro_title">X硕XXXPad</strong>
							<p class="name">平板电脑</p>
							<p class="price marprice">市场价: <span>2000.00</span></p>
							<p class="price">价格: <span>1299.00</span><p>
							<p class="note">买即得XX视频VIP</p>
						</div>
					</li>
					<li>
						<img src="../../assets/pro_pic2.jpg" class="pro_pic" alt="" />
						<div>
							<strong class="pro_title">X想ThiXXX</strong>
							<p class="name">平板电脑</p>
							<p class="price marprice">市场价: <span>6000.00</span></p>
							<p class="price">价格: <span>5599.00</span><p>
							<p class="note">热销型号满千减百不封</p>
						</div>
					</li>
					<li>
						<img src="../../assets/pro_pic3.jpg" class="pro_pic" alt="" />
						<div>
							<strong class="pro_title">X为MX平板电脑</strong>
							<p class="name">平板电脑</p>
							<p class="price marprice">市场价: <span>2000.00</span></p>
							<p class="price">价格: <span>1488.00</span><p>
							<p class="note">热销型号满千减百不封</p>
						</div>
					</li>
					<li>
						<img src="../../assets/pro_pic4.jpg" class="pro_pic" alt="" />
						<div>
							<strong class="pro_title">X星千小XGaX</strong>
							<p class="name">平板电脑</p>
							<p class="price marprice">市场价: <span>2000.00</span></p>
							<p class="price">价格: <span>1199.00</span><p>
							<p class="note">热销型号满千减百不封</p>
						</div>
					</li>
					<li>
						<img src="../../assets/pro_pic5.jpg" class="pro_pic" alt="" />
						<div>
							<strong class="pro_title">X想YOXXTa</strong>
							<p class="name">平板电脑</p>
							<p class="price marprice">市场价: <span>2000.00</span></p>
							<p class="price">价格: <span>1909.00</span><p>
							<p class="note">热销型号满千减百不封</p>
						</div>
					</li>
					<li>
						<img src="../../assets/pro_pic6.jpg" class="pro_pic" alt="" />
						<div>
							<strong class="pro_title">紫XXXMZXX</strong>
							<p class="name">平板电脑</p>
							<p class="price marprice">市场价: <span>500.00</span></p>
							<p class="price">价格: <span>189.00</span><p>
							<p class="note">热销型号满千减百不封</p>
						</div>
					</li>
				</ul>
                <div class="page">
                    <router-link to="/" class="num"> < </router-link>
                    <router-link to="/" class="num active">1</router-link>
                    <router-link to="/" class="num">2</router-link>
                    <router-link to="/" class="num">3</router-link>
                    <router-link to="/" class="num">4</router-link>
                    <router-link to="/" class="num">5</router-link>
                    <router-link to="/" class="num"> > </router-link>
                </div>
            </div>
  		</div>
  		
  		<footer-v></footer-v>
  </div>
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer
  },
  data () {
    return {
        
    }
  },
  methods : {
    
  }
}
</script>


<style type="text/css">
	/* Product.style */

    .pro-content .tab a{
        width:0.86rem; height:0.42rem; background:rgba(14,183,244,1); line-height:0.42rem; float:left; text-align:center; color:#fff; display:block; margin-left:0.15rem; border-radius:0.03rem 0.03rem 0.03rem 0.03rem; margin-bottom:0.1rem; 
    } 

	.pro-content .content {
		padding: 0 0.05rem; clear:both;
	}
	.pro-content .content li{
		width: 41%; float: left; padding: 0.15rem 0.1rem; overflow: hidden; margin-bottom: 0.12rem;-webkit-transition: 0.3s; transition: 0.3s;
	}
	.pro-content .content li:nth-of-type(2n){
		margin-left: 0.12rem;
	}
	.pro-content .content .pro_pic{
		width: 1.2rem; height: 1.2rem;
	}
	.pro-content .content li:hover{
		border-color: rgb(255, 102, 0); -webkit-transition: 0.3s; transition: 0.3s;
	}
	.pro-content .content .pro_title,.pro-content .content .note{
		color: #5A5A5A;
	}
	.pro-content .content .name{
		color:#0064d4;
	}
	.pro-content .content .name:hover{
		color: #2c90ff;
	}
	.pro-content .content .price{
		color:#acacac;
	}
	.pro-content .price span{
		color: #ff3c00;
	}
	.pro-content .marprice span{
		color: #666; text-decoration: line-through;
	}
</style>
